<template>
	<view class="content">
		<view class="top-tabs-list-box">
			<u-tabs :list="tabsList" active-color="#181818" height="50" inactive-color="#868686" 
			:is-scroll="true" :current="current" @change="change"></u-tabs>
		</view>
		<view class="store-list-box">
			<!-- 分享人列表 -->
			<block v-if="storeList.length">
			<view class="store-item-box" v-for="(item,index) in storeList" @click="goStoreDetails(item.article_id)" :key="item.article_id">
				<view class="store-logo-box">
					<image :src="item.image_input" mode="aspectFill"></image>
				</view>
				<view class="store-info-box">
					<view class="store-title-box">
						<text>{{item.title}}</text>
					</view>
					<view class="store-txt-box">
						<text>分享人：{{item.author}}</text>
					</view>
				</view>
			</view>
			</block>
			<icon-status v-else :imgUrl="'/pageIndex/static/icon23.png'" :statusInfo="'暂无数据'"></icon-status>
		</view>
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		components:{
			iconStatus
		},
		data(){
			return {
				tabsList: [
					{
						article_category_id: '',
						name: '全部',
					}
				],//获取顶部tabs列表
				current: 0,//顶部tabs索引
				cid:0,//tabs数据id
				storeList:[],//分享人数据列表
			}
		},
		onLoad() {
			uni.showLoading({title:"加载中"});
			this.getTabsApi();
			this.getShareListApi()
		},
		methods:{
			getTabsApi(){ //获取顶部tabs列表
				this.$u.api.tabsApi({}).then(res=>{
					if(res.code==1){
						res.data.map(item => {
							this.tabsList.push({
								article_category_id: item.article_category_id,
								name: item.title,
							})
						})
					}
				});
			},
			getShareListApi(){//分享人数据列表
				this.$u.api.shareListApi({cid:this.cid}).then(res=>{
					if(res.code==1){
						uni.hideLoading();
						this.storeList = res.data;
						console.log('分享人列表：',res.data);
					}
				});
			},
			change(index) {
				this.cid = this.tabsList[index].article_category_id;
				this.current = index;
				this.storeList = [];//切换数据需要清空之前的数据
				uni.showLoading({title:"加载中"});
				this.getShareListApi();
			},
			goStoreDetails(id){ //转到详情
				this.$gourl(`/pageIndex/bigCoffeeShare/shareDetails?id=${id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		font-family: Microsoft YaHei;
		padding-top: 100rpx;
		box-sizing: border-box;
		.top-tabs-list-box {
			position: fixed;top: 0;z-index: 100;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			background: #fff;
		}
		.store-list-box{
			padding-left: 20rpx;
			.store-item-box{
				padding: 40rpx 20rpx 40rpx 0;
				display: flex;
				border-bottom: 1rpx solid #EDEDED;
				.store-logo-box{
					flex: 0.36;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.store-info-box{
					flex: 0.7;
					display: flex;flex-direction: column;
					.store-title-box{
						flex: 0.8;
						font-size: 30rpx;
						font-weight: 400;
						color: #181818;
					}
					.store-txt-box{
						flex: 0.2;
						font-size: 26rpx;
						font-weight: 400;
						color: #666666;
						display: flex;flex-direction: column;
					}
				}
			}
		}
	}
</style>